import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import IonicResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import postcssPresetEnv from 'postcss-preset-env';
// @ts-ignore
import pxtoviewport from 'postcss-px-to-viewport';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动引入变量
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          '@/lang/i18n': ['t']
        }
      ],
      resolvers: [ElementPlusResolver()],
      eslintrc: {
        enabled: true
      },
      vueTemplate: true
    }),
    // 自动引入组件
    Components({
      resolvers: [
        ElementPlusResolver(),
        IonicResolver({
          prefix: 'icon'
        })
      ]
    }),
    // 自定义引入图标
    Icons({
      compiler: 'vue3'
    }),
    // 对模板进行预编译
    VueI18nPlugin({
      include: fileURLToPath(new URL('./src/lang/**', import.meta.url)),
      fullInstall: false
    }),
    // 支持打包为兼容模式
    legacy()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        // 对 rpx 单位进行转化为 vw,其中 750rpx 相当于 100vw
        pxtoviewport({
          unitToConvert: 'rpx',
          viewportWidth: 750,
          include: [/\/src\//],
          minPixelValue: 1
        }),

        // 支持使用 stage 2 的特性,和自动添加厂商前缀
        postcssPresetEnv({
          stage: 2
        })
      ]
    }
  },
  server: {
    host: true
  },
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});
